<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./button.css">
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <!-- this 在js 里面很灵活， css 那些让我们觉得很坑的，BFC  -->
  <button class="button">按钮</button>
  <script>
    // 如何实现这个效果？ 
    // 如何使用纯css做抛物线? 月影
    // 细化知识点  css 构成
    // css4 variable  css js 交互的交过 
    // 总结能力 
    // 1. 环形渐变
    // 2. js mousemove事件
    // 3. css 变量 js 改变 
    // 4. trasition 
    document.querySelector('.button').onmousemove = (e) => {
      const x = e.pageX - e.target.offsetLeft;
      const y = e.pageY - e.target.offsetTop;
      e.target.style.setProperty('--x', `${x}px`)
      e.target.style.setProperty('--y', `${y}px`)
    }
  </script>
</body>

</html>